<template>
  <view class="container">
    <view class="example-body">
      <uni-datetime-picker
        v-model="range"
        type="daterange"
        @maskClick="maskClick"
        @change="onDateRangeChange"
        placeholder="请选择时间范围"
      />
    </view>

    <uni-table
      border
      stripe
      emptyText="暂无更多数据"
      style="width: 100%; height: 100%"
    >
      <!-- 表头行 -->
      <uni-tr>
        <uni-th align="center" filter-type="date" width="80">类型</uni-th>
        <uni-th align="center" filter-type="date" width="160">报警时间</uni-th>
        <uni-th align="center" filter-type="string" width="80">报警值</uni-th>
      </uni-tr>
      <!-- 表格数据行 -->
      <uni-tr v-for="item in list" :key="item.id">
        <uni-td align="center">{{
          getLabel("mqtt_device_report_data_type", item.dataType)
        }}</uni-td>
        <uni-td align="center">{{ formatDateT(item.createTime) }}</uni-td>
        <uni-td align="center">{{ item.exceedValue }}</uni-td>
      </uni-tr>
    </uni-table>
    <view class="uni-pagination-box">
      <uni-pagination
        show-icon
        :page-size="queryParams.pageSize"
        :current="queryParams.pageNo"
        :total="total"
        @change="change"
    /></view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, watch, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { formatDateT } from "@/pagesS1/api/index";
import { getAlermList } from "@/pagesS1/api/deviceinfo";
import type { AlarmRecord } from "@/pagesS1/api/deviceinfo";
import { getLabel } from "@/utils/wxdict";
// 接收父组件传递的mqttConfigId
// 参数
const props = defineProps({
  search: {
    type: Object,
    required: true,
  },
});

const loading = ref(true); // 列表的加载中
const list = ref<AlarmRecord[]>([]); // 列表的数据
const total = ref(0); // 列表的总页数
//查询参数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 15,
  status: "",
  deviceKey: props.search.deviceKey,
  alarm: "",
  level: "",
});

/** 查询列表 */
const getList = async () => {
  console.log("查询参数:", queryParams);
  loading.value = true;
  try {
    queryParams.deviceKey = props.search.deviceKey
    const res = await getAlermList(queryParams);
    list.value = res.data.list;
    total.value = res.data.total;
  } finally {
    loading.value = false;
  }
};
//  处理时间范围变化
const onDateRangeChange = (e: any) => {
  console.log('时间范围变化:', e);
  if (e && e.length === 2) {
    // 删除原来的 createTime 数组
    delete queryParams.createTime;
    
    // 使用数组索引的方式
    queryParams['createTime[0]'] = e[0] + ' 00:00:00';
    queryParams['createTime[1]'] = e[1] + ' 23:59:59';
    queryParams.pageNo = 1;
    getList();
  } else {
    delete queryParams.createTime;
    delete queryParams['createTime[0]'];
    delete queryParams['createTime[1]'];
    queryParams.pageNo = 1;
    getList();
  }
}

const change = (e: any) => {
  // 处理分页变化
  queryParams.pageNo = e.current;
  getList();
};

// 监听props变化
watch(
  () => props.search.deviceKey,
  (val) => {
    if (val) {
      queryParams.deviceKey = val;
      // 重置分页并加载数据
    }
  },
  { immediate: true }
);

onMounted(() => {
  getList();
});

// 页面生命周期钩子
onLoad((query?: Record<string, string | string[] | undefined>) => {});
const range = ref([]);
const single = ref("");
const maskClick = (e: any) => {
  single.value = e;
  console.log("change事件:", (single.value = e));
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  margin: 20rpx;
}
.example-body {
  margin-bottom: 10rpx;
}
</style>